<template>
  <a-modal
    title="$t('memberEditForm.bj')"
    :width="640"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @refresh="handleClickRefresh"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
          label="$t('memberEditForm.xm')"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input v-model="form.realname" />
        </a-form-item>
        <a-form-item
          label="$t('memberEditForm.c')"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input v-model="form.nickname" />
        </a-form-item>
        <a-form-item
          label="$t('memberEditForm.sfzh')"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input v-model="form.id_card" />
        </a-form-item>
        <a-form-item
          label="VIP"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-select v-model="form.vip_id" style="width: 180px" placeholder="$t('memberEditForm.qxz')" @change="handleChange">
            <a-select-option :disabled="form.vip_id == item.id" v-for="item in vip_list" :value="item.id">{{item.label}}({{item.money}})</a-select-option>
          </a-select>
          <a-popconfirm style="margin-left:10px;" title="$t('memberEditForm.sfysdm')" @confirm="settingMember(form.id,form.vip_id)">
            <a-button type="dashed">{{ $t('memberEditForm.sd') }}</a-button>
          </a-popconfirm>
        </a-form-item>
        <a-form-item
          label="$t('memberEditForm.bddy')"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <div v-if="form.douyin && form.douyin.status==1 && form.douyin.info">
            <a-popconfirm title="$t('memberEditForm.sfyjbm')" @confirm="unlinkDouyin(form.id)">
              <a-button type="danger">{{ $t('memberEditForm.jcbd') }}</a-button>
            </a-popconfirm>
          </div>
          <div v-else>
            {{ $t('memberEditForm.zwbd') }}
          </div>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
export default {
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      },
      visible: false,
      vip_list: [],
      confirmLoading: false,
      form_ori: {},
      form: {
        nickname: '',
        realname: '',
        id_card: ''
      },
      curr_vip_id:'',
    }
  },
  methods: {
    add (row) {
      console.log(row)
      this.form_ori = Object.assign({}, row)
      this.form = row
      this.visible = true
    },
    settingMember (id, mid) {
      this.$http.post('/member/set_member', this.$qs.stringify({
        id: id,
        mid: mid
      })).then(res => {
        if (res.code === 0) {
          this.$notification.success({
            message: this.$t('memberEditForm.cg'),
            description: res.msg
          });
          this.visible = false
          this.handleClickRefresh()
        } else {
          this.$notification.error({
            message: this.$t('memberEditForm.sb'),
            description: res.msg
          })
        }
      }).catch(err => {
        this.$notification.error({
          message: this.$t('memberEditForm.sb'),
          description: err.message
        })
      })
    },
    unlinkDouyin (id) {
      this.$http.post('/member/unbind_douyin', this.$qs.stringify({
        id: id,
        type: 1
      })).then(res => {
        if (res.code === 0) {
          this.$notification.success({
            message: this.$t('memberEditForm.cg'),
            description: res.msg
          })
          this.visible = false
          this.handleClickRefresh()
        } else {
          this.$notification.error({
            message: this.$t('memberEditForm.sb'),
            description: res.msg
          })
        }
      }).catch(err => {
        this.$notification.error({
          message: this.$t('memberEditForm.sb'),
          description: err.message
        })
      })
    },
    handleChange (e) {
      console.log(e)
    },
    handleClickRefresh () {
      this.$emit('refresh')
    },
    handleSubmit () {
      if (
        (this.form.realname !== this.form_ori.realname) ||
        (this.form.nickname !== this.form_ori.nickname) ||
        (this.form.id_card !== this.form_ori.id_card)
      ) {
        this.$emit('ok', this.form)
      }
      this.visible = false
    },
    handleCancel () {
      this.visible = false
    },
    getVipList(){
      this.$http.get('/member/card_list').then(res => {
        this.vip_list = [{
          id: 0,
          label: this.$t('memberEditForm.pthy'),
          value: '0',
          money: 0,
        }]
        for (let i = 0; i < res.length; i++) {
          this.vip_list.push({
            id: res[i].id,
            label: res[i].name,
            value: res[i].level,
            money: res[i].money
          })
        }
      }).catch(err => {
        this.$notification.error({
          message: this.$t('memberEditForm.sb'),
          description: err.message
        })
      })
    }
  },
  created () {
    this.getVipList()
  }
}
</script>
